<template>
  <div
    id="signature-pad"
    class="signature-pad"
  >
    <div
      class="signature-pad--body"
      style="min-height: 300px; width: 100%"
    >
      <canvas
        v-show="!signImageUrl"
        ref="signaturePadBoxRef"
        class="canvasId"
        style="border: 2px dashed #f7f7f7"
      />
      <img
        v-if="signImageUrl"
        :src="signImageUrl"
        style="width: 100%; height: 100%"
      />
    </div>
    <p class="desc-text">
      {{ textConfig?.tips }}
    </p>
    <div v-if="mode !== 'design'">
      <div v-if="!signImageUrl">
        <el-button
          type="success"
          @click="savePng"
        >
          {{ textConfig?.confirmBtnText }}
        </el-button>
        <el-button
          plain
          type="warning"
          @click="undo"
        >
          {{ textConfig?.backBtnText }}
        </el-button>
        <el-button
          plain
          type="danger"
          @click="clear"
        >
          {{ textConfig?.clearBtnText }}
        </el-button>
      </div>
      <div v-if="signImageUrl">
        <el-button
          type="primary"
          @click="reSign"
        >
          {{ textConfig?.reSignBtnText }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { signPadEmit, signPadProps } from "./signpad";
import { useSignPadHook } from "@/views/formgen/components/FormItem/SignPad/useSignPadHook";
import { onMounted } from "vue";

const props = defineProps({
  ...signPadProps
});

const emit = defineEmits(signPadEmit);

const { signImageUrl, clear, undo, savePng, reSign, signaturePadBoxRef, initSignaturePad, resizeCanvas } = useSignPadHook(
  props,
  emit
);

onMounted(() => {
  initSignaturePad();
  window.addEventListener("resize", resizeCanvas);
  resizeCanvas();
});
</script>

<style lang="scss" scoped>
@use "index.css" as *;

.sign-pad-container {
  padding: 1px;
}
</style>
